<template>
    <el-dialog class="dialog" v-model="$store.state.userManage.amendUserInfo">
        <template #header>
            <span class="font-size-20px">编辑用户</span>
        </template>
        <el-form :rules="rules" :model="formData">
            <el-form-item label="姓名" prop="name">
                <el-input  placeholder="姓名不能为空" v-model="formData.name"/>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input  placeholder="年龄不能为空" v-model="formData.age"/>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select  placeholder="性别不能为空" v-model="formData.sex">
                    <el-option label="男" value="0" />
                    <el-option label="女" value="1" />
                </el-select>
            </el-form-item >
            <el-form-item label="日期" prop="birthDate">
                <el-date-picker
                    type="date"
                    placeholder="日期不能为空"
                    clearable
                    v-model="formData.birthDate"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input  placeholder="地址不能为空" v-model="formData.address"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="$store.commit('userManage/amendInfo', false)">取消</el-button>
            <el-button type="primary" @click="changedForm">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, defineProps, watch, onMounted } from 'vue'
import { useStore } from 'vuex'
import { addTableData, getTableData, getAllTableData } from '@/api/userManage.js'
import { ElMessage } from 'element-plus'
import { UpdateTableData,  } from '@/api/userManage.js'
const store = useStore()
//用户的信息
const formData = ref({
    id: '',
    name: '',
    age: '',
    sex: '',
    birthDate: '',
    address: ''
})
//接收父组件传过来的表单的数据
const props = defineProps({
    tableRow: Object,
})
//监听父组件传过来的表单的数据然后赋值给formData
watch(()=>props.tableRow,(newVal)=>{
    formData.value = newVal
},{
    deep: true
})
//编辑表单
const changedForm = async()=>{
    if(formData.value === false) return 
    const res = await UpdateTableData(formData.value)
    if(res.data.success){
        ElMessage.success('更新成功')
        store.commit('userManage/amendInfo', false)
    }else{
        ElMessage.warning('更新失败')
    }
}

//表单验证
const rules = ref({
    name: [
        { required: true, message: '名字不能为空', trigger: 'blur' },
    ],
    age: [
        { required: true, message: '年龄不能为空', trigger: 'blur' },
    ],
    sex: [
        { required: true, message: '性别不能为空', trigger: 'blur' },
    ],
    birthDate: [
        { required: true, message: '出生日期不能为空', trigger: 'blur' },
    ],
    address: [
        { required: true, message: '地址不能为空', trigger: 'blur' },
    ],
})
</script>
<style scoped lang="less">
.dialog{
    width: 100%;
    .el-form{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .el-form-item{
            width: 49%;
            :deep(.el-input){
                width: 270px
            }
            :deep(.el-select){
                width: 270px
            }
        }
    }
}
</style>